<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LofCoolFlashNews 1.0 - Mootool 1.1</title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script language="javascript" type="text/javascript" src="js/mootools.svn.js"></script>
<script language="javascript" type="text/javascript" src="js/lofcoolflashnews.mt11.js"></script>

</head>

<body>
	<div id="container">
    		<h1><strong>LofCoolFlashNews 1.0</strong> - Slideshow - Mootool 1.1</h1>
       
 <p>
	<strong> Direction:  Opacity </strong> 
</p>       

<div id="lofslidecontent45" class="lof-slidecontent" style="width:900px; height:300px">
<div class="preload"><div></div></div>
 <!-- MAIN CONTENT --> 
  <div class="lof-main-wapper" style="width:900px; height:300px">
  		        <div class="lof-main-item">
        			<img src="images/791902news3.jpg" title="Newsflash 2" height="300" width="900">           
                 <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 2" href="#">Newsflash 2</a></h3>

                <p>The one thing about a Web site, it always changes! Joomla! makes it easy to add Articles, content,...</p>
             </div>
        </div> 
                <div class="lof-main-item">
        	<img src="images/435576news10.jpg" title="Newsflash 1" height="300" width="900">            <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 1" href="#">Newsflash 1</a></h3>
                <p>Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are...</p>

             </div>
        </div> 
                <div class="lof-main-item">
        	<img src="images/641906img1.jpg" title="Newsflash 3" height="300" width="900">            <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 3" href="#">Newsflash 3</a></h3>
                <p>With a library of thousands of free Extensions, you can add what you need as your site grows. Don't...</p>
             </div>
        </div> 
                <div class="lof-main-item">

        	<img src="images/416719news7.jpg" title="Newsflash 5" height="300" width="900">            <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 5" href="#">Newsflash 5</a></h3>
                <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>
             </div>
        </div> 
        	
  </div>
  <!-- END MAIN CONTENT --> 
    <!-- NAVIGATOR -->

  <div class="lof-navigator-outer">
  		<ul class="lof-navigator">
        	        	<li class="lof-navigator-item hasLofTip" title="Newsflash 2::&lt;img src=&quot;images/lofthumbs/791902news3.jpg&quot; title=&quot;&quot; height=&quot;70&quot; width=&quot;140&quot;&gt;">
            	<span>1</span>
            </li>
        	        	<li class="lof-navigator-item hasLofTip" title="Newsflash 1::&lt;img src=&quot;images/lofthumbs/435576news10.jpg&quot; title=&quot;&quot; height=&quot;70&quot; width=&quot;140&quot;&gt;">
            	<span>2</span>
            </li>

        	        	<li class="lof-navigator-item hasLofTip" title="Newsflash 3::&lt;img src=&quot;images/lofthumbs/641906img1.jpg&quot; title=&quot;&quot; height=&quot;70&quot; width=&quot;140&quot;&gt;">
            	<span>3</span>
            </li>
        	        	<li class="lof-navigator-item hasLofTip" title="Newsflash 5::&lt;img src=&quot;images/lofthumbs/416719news7.jpg&quot; title=&quot;&quot; height=&quot;70&quot; width=&quot;140&quot;&gt;">
            	<span>4</span>
            </li>
        		
        </ul>
  </div>
 </div> 
<script type="text/javascript">
	var _lofmain =  $('lofslidecontent45');
	var _lofscmain = _lofmain.getElement('.lof-main-wapper');
	var _lofnavigator = _lofmain.getElement('.lof-navigator-outer');
	var object = new LofFlashContent( _lofscmain, _lofnavigator,
									   { fxObject:{ transition:Fx.Transitions.Back.easeOut,  duration:1100},
									 	 interval:4000,
							 			 layoutStyle:'opacity' } )
	.start( true, _lofmain.getElement('.preload') );
</script>


 <p> 
<a href="index.html">Demo 1</a>  | <a href="index2.html">Demo 2</a>  |  <a href="index3.html">Demo 3</a>  | <a href="index2.1.html">Demo with mootool 1.2</a> </p>    </div>
</body>
</html>
